<template>
  <div id="spaceDetailPage">
    <a-flex justify="space-between">
      <h2>{{ space?.spaceName }}（私有空间）</h2>

      <a-space size="middle">
        <!-- 创建图片按钮（新窗口打开） -->
        <a-button type="primary" :href="`/add_picture?spaceId=${space?.id}`" target="_blank">
          + 创建图片
        </a-button>
        <PictureEditBatch
          ref="batchEditPictureModalRef"
          :spaceId="space?.id"
          :pictureList="dataList"
          :onSucces="onBatchEditPictureSuccess"
        />
        <a-button :icon="h(EditOutlined)" @click="doBatchEdit"> 批量编辑</a-button>
        <a-tooltip
          :title="`占用空间 ${formatSize(space?.totalSize)} / ${formatSize(space?.maxSize)}`"
        >
          <a-progress
            type="circle"
            :percent="((space?.totalSize * 100) / space?.maxSize).toFixed(1)"
            :size="45"
          />
        </a-tooltip>
      </a-space>
    </a-flex>
    <div class="picture">
      <PictureSearchForm :onSearch="onSearch" />
      <PictureList :dataList="dataList" :loading="loading" showOp :onReload="getSpacePictureList" />
      <a-pagination
        v-model:current="searchParams.current"
        v-model:page-size="searchParams.pageSize"
        :total="total"
        style="text-align: right"
        @change="onPageChange"
        :show-total="() => `图片总数${total}/${space?.maxCount}`"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { listPictureVoPageWithCacheUsingPost } from '@/api/pictureController'
import { getSpaceVoByIdUsingGet } from '@/api/spaceController'
import PictureList from '@/components/PictureList.vue'
import PictureSearchForm from '@/pages/picture/PictureSearchForm.vue'
import { EditOutlined } from '@ant-design/icons-vue'
import { h, onMounted, ref } from 'vue'
import PictureEditBatch from '../picture/PictureEditBatch.vue'

//数据
const dataList = ref([])
const loading = ref(true)
const total = ref(0)
const props = defineProps<{
  id: number | string
}>()

const space = ref<API.SpaceVO>()

//搜索条件
const searchParams = ref<API.PictureQueryRequest>({
  current: 1,
  pageSize: 12,
  sortField: 'createTime',
  sortOrder: 'descend',
})

const formatSize = (size: number) => {
  return (size / 1024 / 1024).toFixed(2) + 'MB'
}

//分页参数
const onPageChange = (page: number, pageSize: number) => {
  searchParams.value.current = page
  searchParams.value.pageSize = pageSize
  getSpacePictureList()
}

//搜索
const onSearch = (newParams: API.PictureQueryRequest) => {
  searchParams.value = {
    ...searchParams.value,
    ...newParams,
    current: 1, //搜索时重置到第一页
  }
  getSpacePictureList()
}

//获取空间图片列表
const getSpacePictureList = async () => {
  loading.value = true
  const params = {
    ...searchParams.value,
    spaceId: props.id,
  }
  const res = await listPictureVoPageWithCacheUsingPost(params)
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  } else {
    console.error('获取空间图片列表失败' + res.data.message)
  }
  loading.value = false
}

//获取空间详情
const getSpaceDetail = async () => {
  const res = await getSpaceVoByIdUsingGet({
    id: props.id,
  })
  console.log('空间详情', res)
  if (res.data.code === 0 && res.data.data) {
    space.value = res.data.data
  } else {
    console.error('获取空间详情失败' + res.data.message)
  }
}

//批量编辑图片
const batchEditPictureModalRef = ref()
const onBatchEditPictureSuccess = () => {
  getSpaceDetail()
}
const doBatchEdit = () => {
  if (batchEditPictureModalRef.value) {
    batchEditPictureModalRef.value.openModal()
  }
}
onMounted(() => {
  getSpaceDetail()
  getSpacePictureList()
})
</script>

<style lang="scss" scoped>
#spaceDetailPage {
  .picture {
    margin-top: 16px;
  }
}
</style>
